<template>
    <div class="chart-header">
        <div class="chart-header_weather">
            <span class="chart-header_weather__address">{{weatherData?.city}}</span>
            <img class="chart-header_weather__img" src="../../../assets/icons/cloudy.png" />
            <span class="chart-header_weather__degrees">{{weatherData?.data?.[0]?.tem_day}}°</span>
            <span class="chart-header_weather__tips">{{weatherData?.data?.[0]?.wea}}</span>
        </div>
        <div class="chart-header_title">
            智慧园区一体化管理平台
        </div>
        <div class="chart-header_date">
            <img class="chart-header_date__img" src="../../../assets/icons/date.png" />
            <span>{{dateTime}} {{clockTime}}</span>
            <span class="chart-header_date__out" @click="handleLoginOut">退出</span>
        </div>
    </div>
</template>

<script>
import { getSkyQuery } from '@/api/index.js'
import { clearCookies } from '@/utils/cookie-util'
export default {
  data() {
    return {
      dateTime: this.$moment().format('YYYY-MM-DD'),
      clockTime: '',
      timer: null,
      weatherData: null,
      imgUrl: ''
    }
  },
  methods: {
    showTime() {
      let date = new Date()
      let hour = date.getHours()
      let minute = date.getMinutes()
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      this.clockTime = hour + ':' + minute
    },
    _getSkyQuery() {
      getSkyQuery().then((res) => {
        let results = res.data
        if (results) {
          this.weatherData = results
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleLoginOut() {
      clearCookies()
      setTimeout(() => {
        this.$router.replace({path: '/login'})
      }, 300)
    }
  },
  mounted() {
    this.showTime()
    this._getSkyQuery()
    this.timer = setInterval(() => {
      this.showTime()
    }, 10000)
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
.chart-header {
    width: 1920px;
    padding-left: 28px;
    padding-right: 30px;
    box-sizing: border-box;
    height: 70px;
    display: flex;
    justify-content: space-between;
    background-image: url(../../../assets/images/header.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .chart-header_weather {
        display: flex;
        align-items: flex-end;
        width: 400px;
        height: 43px;
        margin-top: 14px;
        .chart-header_weather__address {
            font-weight: 400;
            font-size: 28px;
            color: #F8FFFF;
            line-height: 33px;
        }
        .chart-header_weather__img {
            width: 43px;
            height: 43px;
            margin-left: 9px;
            margin-right: 10px;
        }
        .chart-header_weather__degrees {
            font-weight: bold;
            font-size: 33px;
            color: #F8FFFF;
            line-height: 39px;
        }
        .chart-header_weather__tips {
            font-size: 14px;
            color: #F8FFFF;
            line-height: 16px;
            display: inline-block;
            margin-bottom: 5px;
        }
    }
    .chart-header_title {
        font-weight: 400;
        font-size: 35px;
        color: #FFFFFF;
        height: 40px;
        line-height: 40px;
        letter-spacing: 3px;
        margin-top: 8px;
    }
    .chart-header_date {
        width: 400px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 12px;
        height: 46px;
        .chart-header_date__img {
          width: 46px;
          height: 46px;
        }
        span {
          font-weight: bold;
          font-size: 26px;
          color: #F8FFFF;
          line-height: 30px;
        }
        .chart-header_date__out {
          font-size: 22px;
          margin-left: 10px;
          cursor: pointer;
        }
    }
}
</style>